<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"/>
    <meta name="referrer" content="origin"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="keywords" th:content="${article.title}"/>
    <meta name="description" th:content="${article.title}"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title th:text="${article.title}">详情页面</title>

    <div th:replace="~{common/commonJs :: topSource}"></div>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/css/post.css"/>
</head>

<body>
<div th:replace="common/navTool :: navTools"></div>

<a id="cover"></a>
<!-- <%- partial('_partial/post/header', {post:page}) %>  -->
<div id="header">
    <div class="header">
        <div class="vertical">
            <div class="inner">
                <h1 class="header-subtitle" th:text="${article.title}"></h1>
                <div class="header-subinfo">
                    <p class="article-info-text">
                      <span>
                          <i class="iconfont icon-time"></i> 发表时间：<span
                              th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd HH:mm')}"></span>
                      </span>
                        <span>
                        <i class="iconfont icon-browse"></i> 阅读：<span
                                th:text="${article.readNum}"></span>
                      </span>
                        <span>
                        <i class="iconfont icon-interactive"></i> 评论：<span th:text="${article.commentNum}"></span>
                      </span>
                        <span>
                        <i class="myIcon">&#xe622;</i> 推荐：<span th:text="${article.likeNum}"></span>
                      </span>
                    </p>
                    <span class="category-color" th:text="${article.categoryName}"></span>
                    <span class="tag-color" th:each="item : ${label}" th:text="${item.name}"></span>
                </div>
            </div>
        </div>
        <canvas id="articleHeaderCanvas"></canvas>
    </div>
</div>
<!-- <%- partial('_partial/post/container', {post: page}) %>  -->
<div id="container">
    <div id="content">
        <div id="article">
            <div class="toc"></div>
            <div class="article-body">
                <div class="markdown-body" th:utext="${article.contentRender}"></div>
                <p class="suffix-end">__END__</p>
                <div class="suffix-box">
                    <div class="suffix-box-left">
                        <img onerror="javascript:this.src='https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/image/logo/cat.png'"
                        src="https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/image/logo/cat.png"
                        >
                    </div>
                    <div class="suffix-box-right">
                        <span class="suffix-box-title">本文作者</span>：
                        <span th:text="${article.author}"></span>
                        <br>
                        <span class="suffix-box-title">本文地址</span>：
                        <a th:href="${#httpServletRequest.getRequestURL()}"><span
                                th:text="${#httpServletRequest.getRequestURL()}"></span></a>
                        <br>
                        <span class="suffix-box-title">许可协议</span>：
                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img
                                alt="Creative Commons License" style="border-width:0"
                                src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"/></a>
                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
                            知识共享署名-非商业性-相同方式共享4.0国际许可
                        </a>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div class="article-footer">
                <div class="category">
                    分类：
                    <a th:href="'/blog/category/'+${article.categoryId}" th:text="${article.categoryName}"></a>
                </div>
                <div class="tag" th:if="${label.size() > 0}">
                    标签：
                    <a th:each="item : ${label}" th:href="'/blog/label/'+${item.id}" th:text="${item.name}"></a>
                </div>
                <div class="article-prev-next">
                    <a href="" class="prev-prefix" th:if="${up != null}">« </a> 上一篇：    <a th:href="'/blog/article/'+${up.id}" th:title="'发布于 ' + ${#dates.format(up.update_time, 'yyyy-MM-dd HH:mm')}" th:text="${up.title}"></a>
                    <br>
                    <a href="" class="next-prefix" th:if="${down != null}">» </a> 下一篇：    <a th:href="'/blog/article/'+${down.id}" th:title="'发布于 ' + ${#dates.format(down.update_time, 'yyyy-MM-dd HH:mm')}" th:text="${down.title}"></a>
                </div>
            </div>
            <!-- 评价区域 -->
            <div class="article-comments">
                <div class="comments-title">
                    评论列表
                </div>
                <div th:replace="~{common/comments :: commentsList}"></div>
                <div class="comments-title">
                    发表评论
                </div>
                <div th:replace="~{common/comments :: comments}"></div>
            </div>
        </div>

    </div>
</div>

<div id="footer"></div>

<div th:replace="common/menu :: menu"></div>

<script th:replace="~{common/commonJs :: config}"></script>

<script type="text/javascript" th:inline="javascript">
    const id = '[[${article.id}]]';

    layui.use(['layer'], function () {
        var layer = layui.layer; //独立版的layer无需执行这一句

        /*提交评论*/
        $("#vsubmit").click(function () {
            if (getSeesionToken() == null) {
                const scanerOpen = layer.open({
                    title: '微信扫码登录',
                    area: ['340px', '345px'],
                    type: 2
                    , content: '/blog/weixin/QRCode'
                    , btn: false,
                    cancel: function (index) {
                        layer.close(index)
                        return false;
                    }
                });
                const timer = setInterval(function () {
                    if (getSeesionToken() != null) {
                        layer.close(scanerOpen)
                        clearInterval(timer)
                    }
                }, 2000)
                return
            }

            const val = $("#veditor").val();
            if (val.trim() == '') {
                layer.msg('评论内容不能为空');
                return
            }
            $("#veditor").val("")

            $("#replySite").attr("data-v-id", id)

            let replyId = null;
            if (!$("#replySite").is(":hidden")) {
                replyId = $("#replySite").attr("data-v-id")
            }


            $.post("/blog/comment", {
                articleId: id,
                replyId: replyId,
                comment: val
            }, function (res) {
                if (res.code == 1) {
                    layer.msg('发表评论成功');
                    let lz = ''
                    if ('[[${article.userId}]]' == getUser().id) {
                        lz = '[楼主]'
                    }
                    let reply = ''
                    const c = marked(val)
                    const index = $("#vcardsList").children().length
                    const time = formatDate(new Date(), "yyyy-MM-dd hh:mm")
                    //     let html = `
                    // <fieldset class="layui-elem-field">
                    //     <legend>#${index + 1}楼${lz}&nbsp;&nbsp;${time}&nbsp;&nbsp;${getUser().nickName}</legend>
                    //     <div class="layui-field-box">
                    //         ${reply}${c}
                    //     </div>
                    // </fieldset>
                    // `

                    const html = `
                    <div class="vcard">
                        <img class="vimg"
                             src="https://gravatar.loli.net/avatar/487f87505f619bf9ea08f26bb34f8118?d=mp&amp;v=1.4.14">
                        <div class="vh">
                            <div class="vhead"><span class="vnick">#${index + 1}楼${lz}&nbsp;&nbsp;${getUser().nickName}</span></div>
                            <div class="vmeta"><span class="vtime">${time}</span>
                                <span class="vat" >回复</span>
                            </div>
                            <div class="vcontent">
                                ${reply}${c}
                            </div>
                        </div>
                    </div>
                    `
                    $("#vcardsList").append(html)
                } else {
                    layer.msg('发表评论失败');
                    $("#veditor").val(val)
                }
            })
        })

    })
    let num = 1;
    $(function () {
        /*查询评论*/
        function commentsList() {
            $(".vload-bottom").show();
            $.get(`/blog/getComment/${id}/${num}`, {}, function (res) {
                if (res.code == 1) {
                    if (res.data.pageNumber < res.data.pages) {
                        $(".vpage").show()
                    } else {
                        $(".vpage").hide()
                    }
                    const data = res.data.rows || []
                    if (data.length > 0) {
                        $(".vempty").hide()
                    }
                    data.forEach((item, index) => {
                        let lz = ''
                        if ('[[${article.userId}]]' == item.sendId) {
                            lz = '[楼主]'
                        }
                        let reply = ''
                        if (item.replyName) {
                            reply = `<a href="#" target="_self" rel="nofollow">@ ${item.replyName}</a>`
                        }
                        const c = marked(item.comment)

                        const html = `
                    <div class="vcard" >
                        <img class="vimg"
                        src="${item.avatar}"
                             onerror="javascript:this.src='https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/image/sidebar/davatar.png'">
                        <div class="vh">
                            <div class="vhead"><span class="vnick">#${index + 1}楼${lz}&nbsp;&nbsp;&nbsp;&nbsp;${item.sendName}</span></div>
                            <div class="vmeta"><span class="vtime">${item.createdTime}</span>
                                <span class="vat">
                                   <a
                                     data-v-id="${item.id}"
                                     data-v-name="${item.sendName}"
                                     onclick="goComments(this)"
                                     href="#commentsContent" target="_self">
                                        回复</a>
                                 </span>
                            </div>
                            <div class="vcontent">
                                ${reply}${c}
                            </div>
                        </div>
                    </div>
                    `
                        $("#vcardsList").append(html)
                    })

                    $(".vload-bottom").hide();
                }
            })
        }

        commentsList();
        $(".vpage").click(function () {
            $(this).hide()
            num++;
            commentsList();
        })

        const likedNum = [[${article.likedNum}]];

        $("#liked").click(function (e) {
            $(this).text(`对我有用！（${likedNum + 1}）`)
            $.post("/app/liked", {
                id: id
            }, function (res) {
                console.log(res)
            })
        })
    })

    function goComments(_this) {
        const id = $(_this).attr("data-v-id")
        const name = $(_this).attr("data-v-name")
        $("#replySite").attr("data-v-id", id)
        $("#replySite>span").text(`@${name}`)
        $("#replySite").show()
    }
</script>
</body>

</html>